<template>
  <div>
    <card>
      <div class="inputBox">
        手机号
        <div class="inputConter">
          <el-input
            v-model.trim="applyBrand.userphone"
            placeholder="请输入"
            clearable
          ></el-input>
        </div>
      </div>
      <div class="inputBox">
        申请时间（开始）
        <div class="inputConter">
          <date-time-picker
            @dataChange="pickerChange_create"
            ref="createTime"
          ></date-time-picker>
        </div>
      </div>
      <div class="inputBox">
        申请时间（结束）
        <div class="inputConter">
          <date-time-picker
            @dataChange="pickerChange_end"
            ref="endTime"
          ></date-time-picker>
        </div>
      </div>
      <div class="inputBox">
        姓名
        <div class="inputConter">
          <el-input
            v-model.trim="applyBrand.name"
            placeholder="请输入"
            clearable
          ></el-input>
        </div>
      </div>
      <div class="inputBox">
        审核状态
        <div class="inputConter">
          <el-select v-model="applyBrand.status" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="btn_box">
        <ButtonCn text="查询" @myclick="query" class="btn_inbleck"></ButtonCn>
        <ButtonCn text="重置" @myclick="Reset" class="btn_inbleck"></ButtonCn>
      </div>
    </card>
    <div class="zhanwei_box" v-show="excelData.length > 0">
      <download-excel
        class="export-excel-wrapper"
        :data="excelData"
        :fields="json_fields"
        :header="title"
        name="品牌大使数据.xls"
      >
        <ButtonCn text="导出Excel" class="export"></ButtonCn>
      </download-excel>
    </div>
    <div class="zhanwei_box" v-show="excelData.length == 0">
      <ButtonCn
        text="导出Excel"
        class="export"
        @myclick="myexportBtm"
      ></ButtonCn>
    </div>
    <card>
      <el-table
        :data="applyBrandData"
        style="width: 100%"
        @select="checketou"
        @select-all="checketou"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="申请状态" align="center">
          <template slot-scope="scope">
            <div>
              <!-- {{scope.row.brandStatus}} -->
              <el-tag type="success" v-if="scope.row.brandStatus == 1"
                >品牌大使</el-tag
              >
              <el-tag type="danger" v-if="scope.row.brandStatus == 2"
                >已驳回</el-tag
              >
              <el-tag v-if="scope.row.brandStatus == 3">待审核</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="brandUserName" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="brandMobile" label="电话" align="center">
        </el-table-column>
        <el-table-column prop="brandSheng" label="所在省" align="center">
        </el-table-column>
        <el-table-column prop="brandSHi" label="所在城市" align="center">
        </el-table-column>
        <el-table-column prop="brandQu" label="所在区" align="center">
        </el-table-column>
        <el-table-column prop="brandStore" label="门店" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div>
              <ButtonCn
                text="设置"
                @myclick="examine(scope.row.userId)"
              ></ButtonCn>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </card>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 100]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <alert-cn
      title="审核"
      :alertShow="examineAlert"
      rightText="确认"
      leftText="取消"
      @clone="examineAlert = false"
      @confirm="examineSubmint"
      @cancel="examineAlert = false"
    >
      <el-radio-group v-model="radio" @change="radioChange">
        <el-radio :label="0">普通用户</el-radio>
        <el-radio :label="1">品牌大使</el-radio>
        <el-radio :label="2">驳回</el-radio>
      </el-radio-group>
    </alert-cn>
  </div>    
</template>

<script>
import card from "../../components/from/card.vue";
import ButtonCn from "../../components/from/button-cn.vue";
import dateTimePicker from "../../components/from/DateTimePicker.vue";
import { getapplyFun, examination } from "../../request/index";
export default {
  components: { card, dateTimePicker, ButtonCn },
  data() {
    return {
      title: "",
      json_fields: {
        名字: "brandUserName",
        品牌大使电话: "brandMobile",
        所在省: "brandSheng",
        所在城市: "brandSHi",
        所在区: "brandQu",
        门店: "brandStore",
      },
      excelData: [],
      examineAlert: false,
      total: 0,
      page: 1,
      count: 10,
      radio: 0,
      id: null,
      applyBrandData: [],
      applyBrand: {
        userphone: "",
        starttime: "", //申请时间（开始）
        endtime: "", // 申请时间（结束）
        name: "",
        status: "",
      },
      options: [
        {
          value: 1,
          label: "品牌大使",
        },
        {
          value: 2,
          label: "已驳回",
        },
        {
          value: 3,
          label: "待审核",
        },
      ],
    };
  },
  created() {
    this.getdataList();
  },
  methods: {
    checketou(vm) {
      this.excelData = vm;
      console.log(this.excelData);
    },
    radioChange(radio) {
      this.radio = radio;
    },
    examineSubmint() {
      examination(this.id, this.radio).then((res) => {
        if (res.code != "0000") return this.$message.error(res.msg);
        this.$message.success(res.msg);
        this.examineAlert = false;
        this.getdataList();
      });
    },
    examine(id, radio) {
      this.id = id;
      this.examineAlert = true;
    },
    handleSizeChange(val) {
      this.count = val;
      this.getdataList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getdataList();
    },
    async getdataList() {
      const res = await getapplyFun(
        this.page,
        this.count,
        this.applyBrand.userphone,
        this.applyBrand.starttime,
        this.applyBrand.endtime,
        this.applyBrand.name,
        this.applyBrand.status
      );
      if (res.code != "0000") return this.$message.error(res.msg);
      this.total = res.data.total;
      this.applyBrandData = res.data.data;
    },
    Reset() {
      this.$refs.createTime.endtime = "";
      this.$refs.endTime.endtime = "";
      for (var item in this.applyBrand) {
        this.applyBrand[item] = "";
      }
    },
    query() {
      // console.log("query");
      this.getdataList();
      this.$message.success("查询成功");
    },
    pickerChange_create(create) {
      this.applyBrand.starttime = create;
    },
    pickerChange_end(end) {
      this.applyBrand.endtime = end;
    },

    myexportBtm() {
      this.$message.error("请选择要导出的数据");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../components/style/init_el_checkout.scss";
.inputBox {
  display: inline-block;
  margin-right: 68px;
  margin-top: 24px;
  .inputConter {
    display: inline-block;
  }
}
.btn_box {
  float: right;
  margin-right: 100px;
  margin-top: 25px;
  .btn_inbleck {
    display: inline-block;
    margin-right: 20px;
  }
}
.zhanwei_box {
  width: 100%;
  height: 100px;
  line-height: 100px;
  .export {
    float: right;
    margin-right: 100px;
  }
}
</style>
